<template>
  <div class="book-list">
    <div ref="chart"
         class="book-list__chart"/>
    <el-table ref="filterTable"
              :data="showData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
              style="width: 100%"
              :defaultSort="{prop: 'userId'}">
      <el-table-column prop="userId"
                       label="用户ID"
                       width="100"
                       sortable/>
      <el-table-column prop="userName"
                       label="用户名" />
      <el-table-column prop="userRegisterTime"
                       label="注册时间"
                       sortable />
      <el-table-column width="100"
                       label="用户权限"
                       sortable>
        <template slot-scope="scope">
          {{ scope.row.userType === 3 ? '超级管理员' : scope.row.userType === 2 ? '普通用户' : '管理员' }}
        </template>
      </el-table-column>
      <el-table-column label="操作"
                       width="150">
        <template v-if="scope.row.userType !== 3"
                  slot-scope="scope">
          <el-button v-if="scope.row.userType === 1"
                     size="mini"
                     type="success"
                     @click="handleEdit(scope.$index, scope.row)">
            降级
          </el-button>
          <el-button v-if="scope.row.userType === 2"
                     size="mini"
                     type="success"
                     @click="handleEdit(scope.$index, scope.row)">
            晋升
          </el-button>
          <el-button size="mini"
                     type="danger"
                     @click="handleDelete(scope.$index, scope.row)">
            注销
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background
                   align="center"
                   layout="total, sizes, prev, pager, next, jumper"
                   :currentPage="currentPage"
                   :pageSizes="[1, 5, 10, 20]"
                   :pageSize="pageSize"
                   :total="showData.length"
                   hideOnSinglePage
                   class="book-list__pagination"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getUsers, deleteUser, updateUserType } from '../api'

export default {
  computed: {
    option () {
      var obj = {
        series: [
          {
            type: 'pie',
            data: this.optionsData
          }
        ]
      }
      return obj
    }
  },
  mounted () {
    this.getUser()
  },
  data () {
    return {
      currentPage: 1,
      pageSize: 5,
      userList: [],
      showData: [],
      optionsData: [
        {
          value: 0,
          name: '管理员'
        },
        {
          value: 0,
          name: '普通用户'
        },
        {
          value: 0,
          name: '超级管理员'
        }
      ]
    }
  },
  methods: {
    async getUser () {
      await getUsers().then(res => {
        console.log(res)
        this.userList = res
        this.showData = this.userList.slice()
        for (let i = 0; i < 3; i++) {
          this.optionsData[i].value = 0
        }
        this.showData.forEach(item => {
          this.optionsData[item.userType - 1].value++
        })
        console.log(this.optionsData)
        this.setChart()
      }).catch(err => {
        console.log(err)
      })
    },
    async handleEdit (index, row) {
      await updateUserType(row.userId).then(res => {
        console.log(res)
        const { code, msg } = res
        if (code == 200) {
          this.$message({
            message: msg,
            type: 'success'
          })
          this.getUser()
        }
      })
    },
    async handleDelete (index, row) {
      await deleteUser(row.userId).then(res => {
        console.log(res)
        const { code } = res
        if (code == 200) {
          this.$message({
            message: '注销成功',
            type: 'success'
          })
          this.getUser()
        }
      })
    },
    // 每页条数改变时触发 选择一页显示多少行
    handleSizeChange (val) {
      this.currentPage = 1
      this.pageSize = val
    },
    // 当前页改变时触发 跳转其他页
    handleCurrentChange (val) {
      this.currentPage = val
    },
    setChart () {
      var myChart = echarts.init(this.$refs.chart)
      // 绘制图表
      myChart.setOption(this.option)
    }
  }
}
</script>

<style lang="less" scoped>
@import '../assets/css/index.less';

.book-list {
  margin: 16px 32px;
  &__chart {
    width: 100%;
    height: 300px;
  }
  &__pagination {
    margin: 20px 0;
  }
}
</style>
